import React, { useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import "./DetailStudent.css";
import detailData from "../../assets/data/detailData";
import StudentData from "./StudentData";
import close from "../../assets/img/close.png";
import RelationPageData from "./../Relation/RelationData";
import student from "./../../assets/img/student.png";
import banner1 from "../../assets/img/detail/student/banner1.png";
import banner2 from "../../assets/img/detail/student/banner2.png";
import banner3 from "../../assets/img/detail/student/banner3.png";
import banner4 from "../../assets/img/detail/student/banner4.png";
import banner5 from "../../assets/img/detail/student/banner5.svg";
import banner6 from "../../assets/img/detail/student/banner6.png";
import banner7 from "../../assets/img/detail/student/banner7.png";
import banner8 from "../../assets/img/detail/student/banner8.png";
import banner9 from "../../assets/img/detail/student/banner9.png";

function DetailStudent(props = {}) {
  const { data = [] } = props;
  let navigate = useNavigate();
  const { search = "" } = useLocation();

  const searchId = search.split("=")[1];
  const { detailList, color, barMargin, bgColor } = detailData().DetailStudent;
  const { pageOne, pageTwo } = RelationPageData();
  const {
    personalitiesQa,
    personalitiesAn,
    attachmentQa,
    attachmentAn,
    lifeMission,
    otherQaOne,
    otherQaTwo,
  } = StudentData();

  const [personalitiesData, setpersonalitiesData] = useState([
    ...personalitiesQa,
  ]);
  const [attachmentQaData, setattachmentQa] = useState([...attachmentQa]);

  const [total, setTotal] = useState(0);

  const [totalAtt, setTotalAtt] = useState(0);

  const [otherQaOneData, setotherQaOne] = useState([...otherQaOne]);

  const [totalOtherQa, settotalOtherQa] = useState(0);

  const [otherQaTwoData, setotherQaTwo] = useState([...otherQaTwo]);

  const [totalOtherTwoQa, settotalOtherTwoQa] = useState(0);

  function onSelectOtherTwoItem(i, v) {
    let qaDataCopy = [...otherQaTwoData];
    qaDataCopy.forEach((e, index) => {
      if (index === i) {
        e.value = v;
      }
    });
    setotherQaTwo([...qaDataCopy]);
    let totalResult = 0;
    qaDataCopy.forEach((e, index) => {
      if (e.value) {
        totalResult = totalResult + e.value;
      }
    });
    settotalOtherTwoQa(totalResult);
  }

  function onSelectOtherItem(i, v) {
    let qaDataCopy = [...otherQaOneData];
    qaDataCopy.forEach((e, index) => {
      if (index === i) {
        e.value = v;
      }
    });
    setotherQaOne([...qaDataCopy]);
    let totalResult = 0;
    qaDataCopy.forEach((e, index) => {
      if (e.value) {
        totalResult = totalResult + e.value;
      }
    });
    settotalOtherQa(totalResult);
  }

  function onSelectItem(i, v) {
    let qaDataCopy = [...personalitiesData];
    qaDataCopy.forEach((e, index) => {
      if (index === i) {
        e.value = v;
      }
    });
    setpersonalitiesData([...qaDataCopy]);
    let totalResult = 0;
    qaDataCopy.forEach((e, index) => {
      if (e.value) {
        totalResult = totalResult + e.value;
      }
    });
    setTotal(totalResult);
  }

  function onSelectAttItem(i, v) {
    let qaDataCopy = [...attachmentQaData];
    qaDataCopy.forEach((e, index) => {
      if (index === i) {
        e.value = v;
      }
    });
    setattachmentQa([...qaDataCopy]);
    let totalResult = 0;
    qaDataCopy.forEach((e, index) => {
      if (e.value) {
        totalResult = totalResult + e.value;
      }
    });
    setTotalAtt(totalResult);
  }
  function pathSwitch(path = `/`) {
    navigate(path);
  }

  return (
    <div className="page-detail-info" style={{ backgroundColor: bgColor }}>
      <div style={{ marginTop: "40px", zIndex: 3, position: "relative" }}>
        <div className="cloud cloud-l page-cloud-l"></div>
        <div className="cloud cloud-m page-cloud-about-m"></div>
        <div className="cloud cloud-r page-cloud-about-r"></div>
        <img
          alt=""
          className="left-ban"
          style={{ position: "absolute", top: "290px", width: "200px" }}
          src={"https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/egg.png"}
        ></img>
        <img
          alt=""
          style={{
            position: "absolute",
            top: "68px",
            width: "160px",
            right: "26%",
          }}
          src={student}
        ></img>
        <div style={{ display: "flex", width: "50%", margin: "auto" }}>
          <div style={{ margin: "200px 20px 0" }}>
            <div className="page-item">
              <a name={"0"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[0].title}
              </h2>
              <img alt="" className="page-item-banner" src={banner1}></img>
              <div className="page-item-sub-title">愛人前先了解自己</div>
              <p className="page-item-info">
                這世代上大學的人數每年上升，大學學費又不斷上漲，20多歲步入社會的新人中有不少背負償還助學貸款的壓力，因此不急於建立家庭。另一方面，女性受教育水平提升，職場地位提高，育兒成本增加，越來越多的人選擇「先立業」而不願過早成家。相信大部份人都認為，生育這回事跟大學生毫不相關。可是婚姻生育決擇是人生重要的一環，無論是從小向往大家庭的你，或是仍未知道自己希望將來的婚育計劃的你，不仿也趁這個機會了解自己更多，讓自己早早計劃，做出適合自己而又不後悔的選擇。
              </p>
              <p className="page-item-info">
                而在談論婚育前，或者我們可以先從談戀愛的課題開始。畢竟，結婚與生育的前題是找到一位各方面合適又相處舒服的另一半，亦要讓自己在雙性關係中懂得去愛人和被愛。但在愛情或親密關係上，卻從來沒有人好好教導我們，該具備什麼樣的特質與能力，這些課題都需要多方面的自我了解和學習。
              </p>
              <p className="page-item-info" style={{ marginTop: "40px" }}>
                想要找到適合又優質的對象，首先自己要成為那個能夠「吸引好對象的人」，在遇到對的人之前，可以透過一些方式好好預備自己。
              </p>
              <div className="relation-pop">
                {pageOne.map((e, i) => {
                  const { title, value } = e;
                  return (
                    <div className="relation-item relation-item-student-one">
                      <div className="relation-item-title">
                        {" "}
                        <sapn className="relation-item-title-index">
                          {i + 1}
                        </sapn>
                        <span
                          dangerouslySetInnerHTML={{ __html: title }}
                        ></span>
                      </div>
                      <div className="relation-item-value">{value}</div>
                    </div>
                  );
                })}
              </div>
              <p className="page-item-info">
                而在找到自我之前，所談的戀情可能會朝以下兩種模式發展：
              </p>
              <div className="relation-pop-two">
                {pageTwo.map((e, i) => {
                  const { title, value } = e;
                  return (
                    <div className="relation-item relation-item-student-two">
                      <div className="relation-item-title-two">
                        {" "}
                        <sapn>
                          第{" "}
                          <span className="relation-item-title-index">
                            {i + 1}
                          </span>{" "}
                          種：
                        </sapn>
                        <span
                          dangerouslySetInnerHTML={{ __html: title }}
                        ></span>
                      </div>
                      <div className="relation-item-value">{value}</div>
                    </div>
                  );
                })}
              </div>
              <p className="page-item-info">
                你又經歷過幾多段不合適的愛情？先了解和愛自己，清楚自己想要的是什麼，再展現真誠，不畏懼失敗，勇敢地相信愛情，是開始找尋愛情的必經過程。
              </p>
            </div>

            <div className="page-item">
              <a name={"1"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[1].title}
              </h2>
              <img alt="" className="page-item-banner" src={banner2}></img>
              <div className="page-item-sub-title">
                Helen Fisher 愛情性格測試
              </div>
              <p className="page-item-info">你的個性適合怎樣的對象？</p>
              <p className="page-item-info">
                這份測驗，是根據人類學家Helen
                Fisher的24題精簡版愛情性格測試，可以找出你的愛情性格！請依照你對自己的了解，非常不同意0分，不同意1分，很同意2分，非常同意3分。
              </p>
              <div className="tutor-list">
                <div className="tutor-list-title">
                  <div className="tutor-list-left tutor-list-left-title">
                    <div className="tutor-list-num"></div>題目
                  </div>
                  <div className="tutor-list-right">
                    <span>非常不同意</span>
                    <span>不同意</span>
                    <span>很同意</span>
                    <span>非常同意</span>
                  </div>
                </div>
                {personalitiesData.map((e, i) => {
                  const { title } = e;
                  return (
                    <div
                      className={`tutor-list-item tutor-list-item-student${
                        Math.ceil((i + 1) / 6) % 2 === 0 ? "2" : "1"
                      }`}
                    >
                      <div className="tutor-list-left">
                        <div className="tutor-list-num">{i + 1}</div>
                        {title}
                      </div>
                      <div className="tutor-list-right">
                        <span
                          className={
                            e.value === 0
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectItem(i, 0)}
                        >
                          0
                        </span>
                        <span
                          className={
                            e.value === 1
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectItem(i, 1)}
                        >
                          1
                        </span>
                        <span
                          className={
                            e.value === 2
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectItem(i, 2)}
                        >
                          2
                        </span>
                        <span
                          className={
                            e.value === 3
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectItem(i, 3)}
                        >
                          3
                        </span>
                      </div>
                    </div>
                  );
                })}
              </div>
              <div class="relation-total-score">
                <div>總計：</div>
                <div class="relation-total-item student-total-item">
                  = {total.toString().padStart(2, 0)}
                </div>
              </div>
              <p className="page-item-info">計分方式：</p>

              <p className="page-item-info">
                <p>
                  <span style={{ fontWeight: "700", color: "#000" }}>
                    開拓者性格：
                  </span>
                  1到6題分數加總
                </p>
                <p>
                  <span style={{ fontWeight: "700", color: "#000" }}>
                    建設者性格：
                  </span>
                  7到12題分數加總
                </p>
                <p>
                  <span style={{ fontWeight: "700", color: "#000" }}>
                    領導者性格：
                  </span>
                  13到18題分數加總
                </p>
                <p>
                  <span style={{ fontWeight: "700", color: "#000" }}>
                    協調者性格：
                  </span>
                  19到24題分數加總
                </p>
              </p>
              <p className="page-item-info">
                計算完之後，其中最高得分的兩者，就是你的「主要」與「次要」性格。
              </p>
              <p className="page-item-info">結果說明</p>
              <div className="page-item-six-relation">
                {personalitiesAn.map((e, i) => {
                  const { title, value } = e;
                  return (
                    <div className="page-item-six-item page-item-six-item-student">
                      <div className="page-item-six-item-title">{title}</div>
                      <div
                        className="page-item-six-item-value"
                        dangerouslySetInnerHTML={{ __html: value }}
                      ></div>
                    </div>
                  );
                })}
              </div>
              <p className="page-item-info">
                你的愛情性格是哪一類？你想發展的對象又是哪一類？在個性上面相似比較好，還是互補比較好呢？
              </p>
              <p className="page-item-info">
                根據 Helen Fisher一項將近10萬人的調查分析結果顯示，
                「開拓者」與「建設者」會選擇相似的人，「協調者」會選擇互補的「領導者」。換句話說，相似論與互補論各對一半。每一種關係都有每一種關係的幸福。
              </p>
            </div>

            <div className="page-item">
              <a name={"2"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[2].title}
              </h2>
              <img alt="" className="page-item-banner" src={banner3}></img>
              <div className="page-item-info">
                五大性格特質（Big Five Personality Traits）分成開放性
                (Openness)、嚴謹性 (Conscientiousness)、外向性
                (Extroversion)、親和性 (Agreeableness)、神經質
                (Neuroticism)共五種性格，參考每個性格特質的首個字母，又稱為OCEAN人格或大五人格。這些特質影響著個人的行為、思考、情感等方面。透過了解自己特質，可以更好地掌握自己的優勢與劣勢，並提升人際關係、職場表現。
              </div>
              <div className="page-item-info">
                五大人格(五型人格)」(Big Five)
                的高準確度與接受度，相較於其他的心理測驗，廣泛地應用在學界、商界。尤其在招募過程中被認為是具有預測效果的性格評估工具。大量研究表明，大五人格特質與工作績效、職業滿意度和組織承諾等指標之間存在顯著的關聯（Salgado,
                1997；Tett, Jackson, & Rothstein, 1991）。
              </div>
              <div className="page-item-info">
                五大人格測評是一種常用的心理學工具，評估個人在人格方面的特質，並給予相應的建議和指導。不管是嘗試了解自己、善加利用個性本質，或是企圖改變自己，這都代表你有機會去塑造更精采的人生。
              </div>
            </div>

            <div className="page-item">
              <a name={"3"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[3].title}
              </h2>
              <img alt="" className="page-item-banner" src={banner4}></img>
              <div className="page-item-info">
                根據心理學家John
                Bowlby提出之依附理論，兒童一出生就會依賴照顧者，以免受到外來的威脅。後來依附理論的學者更發現依附類型影響到的不單是兒童的安全感，更會影響到成人戀愛時的態度。
              </div>
              <div className="page-item-sub-title">
                想知道自己的依附類型是什麼嗎？請接受以下測驗！
              </div>
              <div className="page-item-info">
                說明：以下每一道題目你都可以想想看自己有多同意，如果「非常同意」就填7分，「同意」是6分，「有些同意」是5分，「沒想法」是4分，「有些不同意」是3分，「不同意」是2分，「非常不同意」是1分。
              </div>
              <div className="tutor-list">
                <div className="tutor-list-title">
                  <div className="tutor-list-left tutor-list-left-title">
                    <div className="tutor-list-num"></div>題目
                  </div>
                  <div className="tutor-list-right student-list-right">
                    <span>非常不同意</span>
                    <span>不同意</span>
                    <span>有些不同意</span>
                    <span>沒想法</span>
                    <span>有些同意</span>
                    <span>同意</span>
                    <span>非常同意</span>
                  </div>
                </div>
                {attachmentQaData.map((e, i) => {
                  const { title } = e;
                  return (
                    <div
                      className={`tutor-list-item student-list-item-nor ${
                        title.includes("Ｒ") ? "tutor-list-left-R" : ""
                      }`}
                    >
                      <div className={`tutor-list-left`}>
                        <div className="tutor-list-num">{i + 1}</div>
                        {title}
                      </div>
                      <div className="tutor-list-right student-list-right">
                        <span
                          className={
                            e.value === 1
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectAttItem(i, 1)}
                        >
                          1
                        </span>
                        <span
                          className={
                            e.value === 2
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectAttItem(i, 2)}
                        >
                          2
                        </span>
                        <span
                          className={
                            e.value === 3
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectAttItem(i, 3)}
                        >
                          3
                        </span>
                        <span
                          className={
                            e.value === 4
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectAttItem(i, 4)}
                        >
                          4
                        </span>
                        <span
                          className={
                            e.value === 5
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectAttItem(i, 5)}
                        >
                          5
                        </span>
                        <span
                          className={
                            e.value === 6
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectAttItem(i, 6)}
                        >
                          6
                        </span>
                        <span
                          className={
                            e.value === 7
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectAttItem(i, 7)}
                        >
                          7
                        </span>
                      </div>
                    </div>
                  );
                })}
              </div>
              <div class="relation-total-score">
                <div>總計：</div>
                <div class="relation-total-item student-total-item">
                  = {totalAtt.toString().padStart(2, 0)}
                </div>
              </div>
              <div className="page-item-sub-title">計分步驟：</div>
              <div className="page-item-info">
                把第1題到第18題的分數加起來，這是你的「焦慮依附總分」。把第19題到第36題的分數加起來，這是你的「逃避依附總分」。需要留意的是，如果題目後面有（Ｒ），記得「反向計分」，也就是7分會變成1分，6分會變成2分，4分維持4分，依此類推。
              </div>
              <div className="page-item-info">
                把「焦慮依附總分」除以18，就會得到「焦慮依附平均數」。「逃避依附總分」除以18，得到「逃避依附平均數」。最高分的就是你的依附類型。
              </div>

              <div className="page-item-five-box page-item-five-box-student">
                {attachmentAn.map((e, i) => {
                  const { title, value } = e;
                  return (
                    <div className="page-item-five-item">
                      <p className="page-item-info">
                        <div className="page-item-sub">{title}</div>
                      </p>
                      <p
                        className="page-item-info'"
                        dangerouslySetInnerHTML={{ __html: value }}
                      ></p>
                    </div>
                  );
                })}
              </div>
            </div>

            <div className="page-item">
              <a name={"4"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[4].title}
              </h2>
              <img alt="" className="page-item-banner" src={banner5}></img>
              <div className="page-item-sub-title">
                從小到大，你覺得於成長階段中，有甚麼因素和角度讓你改善自己及肯定自己?
                <br></br>你習慣著眼於自己和他人的優點還是缺點呢?
              </div>
              <div className="page-item-info">
                其實，我們每一個人身上都有不同的性格強項，性格強項部份是天賦，然而環境、經驗、心理活動可以塑造大部份品格。當我們發現、承認及選擇於日常生活中，使用我們的性格強項時，我們便會更愉快、更有成就、更具彈性，以及對生活更滿意。所以，尋找到適合自己的性格特質並盡情地發揮是最重要的。
              </div>
              <div className="page-item-sub-title">24種性格優勢測驗</div>
              <div className="page-item-info">
                性格強項由心理學家沙利文(Martin Seligman)和彼得森(Christopher
                Peterson)提倡，他們識別出 6 種美德及 24
                種性格強項。此測驗根據科學數據設計而成，將世界上普遍為人所珍視的數百萬種「價值觀」整理歸納成人的24項性格長處。依序回答120個問題，你將能得到長處分析結果，會按照分數高低從1排到24。做完這項測驗將可為你的長處冠上一個名稱，比如「創造力」。這時會出現的24種長處如下：創造力、好奇心、判斷力、熱愛學習、洞察力、勇敢、毅力、真誠、熱情、愛、善良、社交智慧、團隊合作、公平、領導力、寬恕、謙虛、謹慎、自律、欣賞美麗與卓越、感恩、希望、幽默、靈性這24種長處。
              </div>
            </div>

            <div className="page-item">
              <a name={"5"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[5].title}
              </h2>
              <img alt="" className="page-item-banner" src={banner6}></img>
              <div className="page-item-info">
                要尋找活著的理由或目的，在紙上劃分開4個區域，分別是：「你享受做的事」，「你擅長的事」，「別人願意付錢請你做的事」，「這社會/世界需要的事」，然後順著以上次序逐個填寫。
              </div>
              <div className="page-flex-box-student">
                {lifeMission.map((e, i) => {
                  const { title, value } = e;
                  return (
                    <div className="page-flex-box-student-item">
                      <div
                        style={{
                          color: color,
                          fontSize: "26px",
                          fontWeight: "700",
                        }}
                      >
                        {i + 1}
                      </div>
                      <div className="page-item-sub">{title}</div>
                      <span style={{ color: color }}>引導問題：</span>
                      {value}
                    </div>
                  );
                })}
              </div>
              <div className="page-item-info">
                如果你熱愛某事且世界需要它，但不賺錢，這被稱為「使命」。
                <br></br>
                如果你擅長某事且熱愛它，但不賺錢，這是你的「熱情」。<br></br>
                如果你擅長某事且賺錢，但不熱愛它，這是你的「職業」。
              </div>
              <div className="page-item-info">
                你應該思考你熱愛的事情、你擅長的事情、機會存在的地方以及世界現在需要的事情，然後嘗試在這四個方面建立連接。
              </div>
            </div>

            <div className="page-item">
              <a name={"6"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[6].title}
              </h2>
              <img alt="" className="page-item-banner" src={banner7}></img>
              <div className="page-item-info">
                最近認識了一個不錯的對象，心思思想交往，但又未知道究竟對方適不適合自己？除了心動的感覺，交往前必須先確認這三件事，有共識的關係，會走得更長久。
              </div>
              <p class="page-item-info">
                <div class="page-item-sub">1. 婚育想法一致</div>
              </p>
              <p class="page-item-info">
                婚姻並非交往必要的終點，卻往往牽涉生活眾多細節。先瞭解彼此對結婚的嚮往程度，若雙方差異太大，最好不要抱著能改變對方的心態交往。對生育的共識也是必要考量。不僅要探討雙方意願，長輩的期望有時亦扮演重要角色。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub">2. 對「家」定義的共識</div>
              </p>
              <p class="page-item-info">
                近年性平教育推廣多元家庭觀念，然而，人們對家庭的想像絕非僅囿限於成員多寡。
              </p>
              <p class="page-item-info">
                以居所為例，許多香港人提倡「有房才能成家」；威爾史密斯（Will
                Smith）夫婦實踐開放式關係，但堅持從一而終者也大有人在。其他如直系血親尊親屬是否納為狹義的家中成員等，都是交往前最好先釐清的價值觀。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub">3. 重要價值觀相似</div>
              </p>
              <p class="page-item-info">
                金錢價值觀迥異也會導致爭執。有人覺得買名牌、Staycation是合理娛樂開銷，也有人天性節儉，認為娛樂消費純屬浪費。
              </p>
              <p class="page-item-info">
                政治、宗教與家庭背景也都是交往前值得先探究的議題，許多個人堅持在熱戀期過後往往易引來不滿，例如基督教的婚前守貞、十一奉獻的教義，或佛教人士有吃素的習慣等，短期的配合不代表必能長期磨合，所以盡早了解可以幫助你選擇合適的人。
              </p>
              <p class="page-item-info">
                價值觀幾乎都牽涉個人生活的優先順序。許多人在交往後之所以不滿，就是誤判了對方將親密關係放在生活中的比重。信仰虔誠者，會將個人信仰放在第一順位；政治立場鮮明者可能無法接納歧見；將閨密或兄弟需求視為優先的人恐怕需要較能自處的另一半。唯有坦誠彼此對交往關係的觀念與認知，才能預防不必要的誤會。
              </p>
            </div>

            <div className="page-item">
              <a name={"7"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[7].title}
              </h2>
              <img alt="" className="page-item-banner" src={banner8}></img>
              <p class="page-item-info">
                明明渴望與他人建立親密關係，卻因為害怕被拒絕、被傷害而一次一次將別人推開？或者看上去社交圈子廣闊，卻從不與人交心，不會展現脆弱的一面？這些都是親密關係恐懼（Fear
                of
                Intimacy）的表現，讓我們一起了解其症狀、成因和改善方法，嘗試敞開心扉，讓別人進入你的內心世界吧！{" "}
              </p>
              <p class="page-item-info">
                什麼是親密關係恐懼？
                所謂親密關係，包括身體接觸、分享感受和情緒、思想上的交流和共同的體驗。
                而親密關係恐懼，通常是無意識地在人際交往中保持距離，對過度的親密感到焦慮、恐懼而採取迴避態度，擔心付出感情後被拒絕或拋棄，因而無法與別人建立真正的親密關係。{" "}
              </p>
              <p class="page-item-info">
                假設你與某個人是處於親密關係，請按以下1-5分的描述為每一題評分。（每項陳述中的「他（她）」指的是想像中與你關係非常親近的人。）{" "}
              </p>
              <p class="page-item-info">
                <div className="page-item-sub">1、一點也不符合我的特徵</div>
                <div className="page-item-sub">2、有一點符合我的特徵</div>
                <div className="page-item-sub">3、中度的符合我的特徵</div>
                <div className="page-item-sub">4、非常符合我的特徵</div>
                <div className="page-item-sub">5、完全符合我的特徵</div>
              </p>
              <p class="page-item-info">
                計分方法：對所有前面有“X”的題目進行反向評分：5 = 1；4 = 2；3 =
                3；2 = 4；1 = 5 。其餘正向評分
              </p>

              <div className="tutor-list tutor-list-student">
                <div className="tutor-list-title">
                  <div className="tutor-list-left tutor-list-left-title">
                    <div className="tutor-list-num"></div>
                    第一部分：假設你與某個人正處於親密關係
                  </div>
                  <div className="tutor-list-right student-list-right">
                    <span>一點也不符合我的特徵</span>
                    <span>有一點符合我的特徵</span>
                    <span>中度的符合我的特徵</span>
                    <span>非常符合我的特徵</span>
                    <span>完全符合我的特徵</span>
                  </div>
                </div>
                {otherQaOneData.map((e, i) => {
                  const { title } = e;
                  return (
                    <div
                      className={`tutor-list-item student-list-item-nox ${
                        title.includes("X") ? "tutor-list-left-x" : ""
                      }`}
                    >
                      <div className="tutor-list-left">
                        <div className="tutor-list-num">{i + 1}</div>
                        {title}
                      </div>
                      <div className="tutor-list-right student-list-right">
                        <span
                          className={
                            e.value === 0
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectOtherItem(i, 0)}
                        >
                          0
                        </span>
                        <span
                          className={
                            e.value === 1
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectOtherItem(i, 1)}
                        >
                          1
                        </span>
                        <span
                          className={
                            e.value === 2
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectOtherItem(i, 2)}
                        >
                          2
                        </span>
                        <span
                          className={
                            e.value === 3
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectOtherItem(i, 3)}
                        >
                          3
                        </span>
                        <span
                          className={
                            e.value === 4
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectOtherItem(i, 4)}
                        >
                          4
                        </span>
                      </div>
                    </div>
                  );
                })}
              </div>
              <div class="relation-total-score">
                <div>總計：</div>
                <div class="relation-total-item student-total-item">
                  = {totalOtherQa.toString().padStart(2, 0)}
                </div>
              </div>

              <div
                style={{
                  borderBottom: `2px dashed ${color} `,
                  margin: "40px 0",
                }}
              ></div>

              <div className="tutor-list tutor-list-student">
                <div className="tutor-list-title">
                  <div className="tutor-list-left tutor-list-left-title">
                    <div className="tutor-list-num"></div>
                    第二部分：請回想你過去的親密關係
                  </div>
                  <div className="tutor-list-right student-list-right"></div>
                </div>
                {otherQaTwoData.map((e, i) => {
                  const { title } = e;
                  return (
                    <div className={`tutor-list-item student-list-item-nox`}>
                      <div className="tutor-list-left">
                        <div className="tutor-list-num">{i + 1}</div>
                        {title}
                      </div>
                      <div className="tutor-list-right student-list-right">
                        <span
                          className={
                            e.value === 0
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectOtherTwoItem(i, 0)}
                        >
                          0
                        </span>
                        <span
                          className={
                            e.value === 1
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectOtherTwoItem(i, 1)}
                        >
                          1
                        </span>
                        <span
                          className={
                            e.value === 2
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectOtherTwoItem(i, 2)}
                        >
                          2
                        </span>
                        <span
                          className={
                            e.value === 3
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectOtherTwoItem(i, 3)}
                        >
                          3
                        </span>
                        <span
                          className={
                            e.value === 4
                              ? "tutor-list-right-span-selected"
                              : ""
                          }
                          onClick={() => onSelectOtherTwoItem(i, 4)}
                        >
                          4
                        </span>
                      </div>
                    </div>
                  );
                })}
              </div>
              <div class="relation-total-score">
                <div>總計：</div>
                <div class="relation-total-item student-total-item">
                  = {totalOtherTwoQa.toString().padStart(2, 0)}
                </div>
              </div>
              <p class="page-item-info">
                {" "}
                把所有題目的分數相加，總分應該落在35-175之間，越高分代表對親密關係的恐懼越高。
              </p>
              <p class="page-item-info">
                美國平均的FIS總分是80-90：女性的平均是75-85；男性的平均是85-95。
              </p>
              <p class="page-item-info">
                如果你的總分比平均分數高，那麼你便可能屬於對親密關係較有恐懼的一群人了。
              </p>
            </div>

            <div className="page-item">
              <a name={"8"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[8].title}
              </h2>
              <img alt="" className="page-item-banner" src={banner9}></img>
              <div className="page-item-sub-title" style={{ color: color }}>
                第
                <span
                  style={{
                    fontSize: "32px",
                    margin: "0 4px",
                    fontWeight: "bold",
                  }}
                >
                  1
                </span>
                步：了解對親密關係恐懼的原因
              </div>

              <div className="relation-pop-two">
                <div className="relation-item relation-item-student-ye">
                  <div className="student-item-title-two">
                    {" "}
                    <sapn>
                      可能原因
                      <span className="relation-item-title-index">1</span>
                    </sapn>
                    <br></br>早期經歷和依戀模式
                  </div>
                  <div className="relation-item-value">
                    研究指出，童年時曾經被家長拒絕和忽視的經歷會讓孩子感得不安全，發展出逃避排除型依戀模式
                    (Dismissing Attachement) 和厚厚的防禦罩。
                  </div>
                </div>
                <div className="relation-item relation-item-student-be">
                  <div className="student-item-title-two">
                    {" "}
                    <sapn>
                      可能原因
                      <span className="relation-item-title-index">2</span>
                    </sapn>
                    <br></br>過往的傷害性親密關係
                  </div>
                  <div className="relation-item-value">
                    低自尊、社交恐懼、抑鬱症、遭受過親密伴侶暴力等性格、心理狀態和經歷都會令我們不想再嘗試。找到恐懼親密關係的源頭，便能更對症下藥地療癒自己。
                  </div>
                </div>
              </div>

              <p class="page-item-info">但具體該如何做呢？</p>
              <div className="page-item-sub-title">1. 覺察並改變內耗信念</div>
              <p class="page-item-info">
                如果有「自我批評」的習慣，例如： 「什麼事都是我的錯」 、
                「我不夠努力，每天不知道在幹嘛」 、
                「這麼簡單的目標也達不到，失敗活該」。當察覺到那些念頭出現時，先問自己：「是真的嗎？」。列舉出已經做的事、已經解決或克服的問題，再問一次自己：「如果是你的朋友，你會對他說什麼？」
                再練習對自己說出正向語言： 「不完美也沒關係」
                、「即使失敗了，你還是一樣值得被愛與尊重」 、
                「事情不順利，也無損你的價值。
              </p>
              <p class="page-item-info">
                先覺察到這些批判都是「主觀」感受，而非「客觀」事實，會更容易跳出低谷漩渦，用第三人稱的視角，不再消耗自己的內心。少許的自我嚴格，是前進的動力，但是大量的自我否定，只會成為前進的阻力。
              </p>

              <div className="page-item-sub-title">2. 理解過去</div>
              <p class="page-item-info">
                過去的生活經歷決定了一個人如何體驗當下，以及如何去愛他人。因此，如果一個人童年經歷了不美好的關系模式，則其當下的關系經歷必然會被這些不良模式所影響和塑造。坦誠面對這些經歷，通過述說、關聯和抉擇的練習可以幫助人們對自身不良的模式和習慣有所警覺，在面對類似境況的時候，有意識地做出與固有習慣不同的選擇，從而使得關系轉向更加積極健康的方向。如有需要，向輔導員傾訴，或者可以更了解自己過去對親密關係的影響，從而好好整理，更能自由地享受愛情呢。
              </p>
              <div className="page-item-sub-title" style={{ color: color }}>
                第
                <span
                  style={{
                    fontSize: "32px",
                    margin: "0 4px",
                    fontWeight: "bold",
                  }}
                >
                  2
                </span>
                步：擁抱曾經的創傷，暫停內心的批判
              </div>
              <p class="page-item-info">
                過去的經歷造就了我們的獨一無二。當然，有些部分讓我們感到抗拒，批評自己的聲音更長期伴隨我們：我其實不好，為何他會靠近我？接納無法改寫的過去，其實你比你想像中勇敢。學會改變這個思考習慣後，會慢慢發現，並非所有人都會拒絕你情感上的需求，希望和係建立情感聯結的人也不少。
              </p>
              <div className="page-item-sub-title" style={{ color: color }}>
                第
                <span
                  style={{
                    fontSize: "32px",
                    margin: "0 4px",
                    fontWeight: "bold",
                  }}
                >
                  3
                </span>
                步：接納脆弱、感受快樂，你能表達真實的自己
              </div>
              <p class="page-item-info">
                你想要的理想親密關係是怎樣的？你可以做些什麼？看看其他人分享做了什麼吧！
              </p>
              <div className="page-item-sub-title">
                1. 享受當下親密關係為我們帶來的快樂
              </div>
              <p class="page-item-info">
                「我開始反思，其實我不應該為了未來的未知就放棄當下跟小狗好好相處的機會，以及讓我們在當下都快樂的機會。學會享受當下是我舒緩對親密關係恐懼的方法。」
              </p>
              <p class="page-item-info">
                我們允許自己感到悲傷和脆弱，也不迴避快樂的感覺。
              </p>
              <div className="page-item-sub-title">2. 學習和練習表達</div>
              <p class="page-item-info">
                「其實向親密的人表達自己的情感需求是一件需要練習的事，不是所有人對於他人情感都足夠敏感，如果我說一次對方沒能get到，那我就說十次好了。」
              </p>
              <p class="page-item-info">
                對方可能並非如你想像般不重視你，你有讓對方知道你的感受嗎？
              </p>
              <p class="page-item-info">
                我們都有克服的能力，但對親密關係的恐懼不是短期形成的，給自己多點時間慢慢克服也是人之常情❤️
                儘管沒有完全消除親密恐懼，也能更了解自己、重視自己的需要和感受～想有人有力地助你一把的話，你可以心理輔導服務，讓輔導員與你探索你害怕親密的根源問題，一起尋求有效的解決方法吧！
              </p>
              <p class="page-item-info">
                隨著年紀漸增，眼看周遭朋友成雙入對組織家庭，眼看自己依舊單身一人，此刻難免不禁會自我懷疑，究竟是自己當真行情低、還是只因運氣差，抑或是自己追愛努力不足？但其實，這其中還存在另一種可能，那就是「其實你並不一定適合戀愛」！單身也能是一種幸福及選擇，別人擁有的幸褔，不一定適合你。找尋適合自己、自覺舒適的生活方式，比起盲目胡亂找個人來愛，那還比較踏實且實際一些。
              </p>
            </div>
          </div>
        </div>
      </div>
      <div className="page-bar page-bar-student">
        {detailList.map((e, i) => {
          const { titleBar, title, id } = e;
          return (
            <div
              style={{
                display: "flex",
                margin: barMargin,
                color: color,
                cursor: "pointer",
              }}
            >
              <div
                style={{
                  minWidth: "10px",
                  background: color,
                  borderRadius: "5px",
                  margin: "0 10px",
                }}
              ></div>
              {/* <div dangerouslySetInnerHTML={{ __html: titleBar }}></div> */}
              <a
                dangerouslySetInnerHTML={{ __html: titleBar }}
                href={"#" + i}
                style={{ color, textDecoration: "none" }}
              ></a>
            </div>
          );
        })}
      </div>
      <div className="page-detail-foot">
        <div className="gradual gradual-student"></div>
        <div className="detail-foot"></div>
        <div className="detail-floor"></div>
      </div>
      <img
        className="page-close cursor-pointer"
        alt=""
        src={close}
        onClick={() => pathSwitch()}
      />
    </div>
  );
}

export default DetailStudent;
